<template>
  <Modal
    v-model:active="rodUnitCreationModel"
    transfer
    title="杆单元创建"
    hide-mask
    draggable
    :no-footer="true"
    @close="closeBtn"
    :width="650"
  >
    <div class="box">
      <Form :model="formRodUnitCreation" style="width: 100%" :hide-label="true">
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">面板</div>
        </div>
        <FormItem>
          <div class="selectorBox">
            <RadioGroup v-model:value="formRodUnitCreation.panel">
              <Radio
                class="radioStyle"
                v-for="item in itemsList"
                :key="item"
                :label="item"
              ></Radio>
            </RadioGroup>
          </div>
        </FormItem>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">选择器</div>
        </div>
        <FormItem>
          <div class="selectorBox">
            <div class="selectorBtn">
              <div class="leftBtn">
                <button class="selector-button active" @click="saveNodeId1">
                  节点
                </button>
              </div>
              <div>
                <button class="selector-button active" @click="saveNodeId2">
                  节点
                </button>
              </div>
            </div>
          </div>
        </FormItem>
        <FormItem>
          <div class="selectorBox">
            <Grid :gap="8" :columns="24">
              <Cell :width="4">
                <Dropdown placement="right" style="width: 100%">
                  <Button>单元类型=</Button>
                  <template #drop>
                    <DropdownList>
                      <DropdownItem
                        v-for="(item, index) in unitTypeList"
                        :key="index"
                        @select="unitTypeBtn(item)"
                      >
                        {{ item.label }}
                      </DropdownItem>
                    </DropdownList>
                  </template>
                </Dropdown>
              </Cell>
              <Cell :width="19">
                <Input
                  v-model:value="formRodUnitCreation.unitType"
                  clearable
                ></Input>
              </Cell>
            </Grid>
          </div>
        </FormItem>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">创建到：</div>
        </div>

        <div class="selectorBox">
          <Grid :gap="8" :columns="24">
            <Cell :width="3">
              <Dropdown placement="right" style="width: 100%">
                <Button>
                  <img
                    src="../../assets/lowerTriangle.svg"
                    alt=""
                    class="icon imgStyle"
                  />
                </Button>
                <template #drop>
                  <DropdownList>
                    <DropdownItem
                      name="选项一"
                      v-for="(item, index) in createList"
                      :key="index"
                      @select="selectBtn(item)"
                    >
                      {{ item.label }}
                    </DropdownItem>
                  </DropdownList>
                </template>
              </Dropdown>
            </Cell>
            <Cell :width="4">
              <Button>当前组件</Button>
            </Cell>
            <Cell :width="14">
              <FormItem>
                <Input
                  disabled
                  v-model:value="formRodUnitCreation.createToInput"
                  clearable
                ></Input>
              </FormItem>
            </Cell>
          </Grid>
        </div>
      </Form>
      <div class="foot-box">
        <Button @click="confirm">创建</Button>
        <Button @click="confirm">回退</Button>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import {
  Modal,
  Button,
  Form,
  FormItem,
  RadioGroup,
  Radio,
  NumberInput,
  Input,
  Grid,
  Cell,
  Dropdown,
  DropdownList,
  DropdownItem,
  Checkbox,
} from "cax-ui";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { useRightMeshEditStore } from "@/UI/store/rightMeshEditStore";
import { _global } from "@/UI/store";
import { LineActor, PointerActor } from "cax-base";
import { LineOptions, MeshEdgeData } from '../interface';
const rightMeshEditStore = useRightMeshEditStore();
const { rodUnitCreationModel } = storeToRefs(rightMeshEditStore);
const formRodUnitCreation = ref({
  panel: "杆单元",
  createTo: "",
  createToInput: "",
  unitType: "",
});
const itemsList = ref([
  "刚性连接",
  "弹簧单元",
  "RBE3单元",
  "质量单元",
  "杆单元",
  "梁单元",
  "边剖分",
  "MPC",
]);
const createList = ref([
  {
    label: "Set_1",
    value: "1",
  },
  {
    label: "Set_2",
    value: "2",
  },
]);
const unitTypeList = ref([
  {
    label: "CWELD",
    value: "1",
  },
  {
    label: "CTUBE",
    value: "2",
  },
  {
    label: "RROD",
    value: "3",
  },
  {
    label: "CFAST",
    value: "4",
  },
  {
    label: "CSESM",
    value: "5",
  },
  {
    label: "CROD",
    value: "6",
  },
  {
    label: "CONROD",
    value: "7",
  },
  {
    label: "CAABSF",
    value: "8",
  },
]);
let rodNode1: any;
let rodNode2: any;
function selectBtn(item) {
  formRodUnitCreation.value.createTo = item.label;
  formRodUnitCreation.value.createToInput = item.label;
}
function unitTypeBtn(item) {
  formRodUnitCreation.value.unitType = item.label;
}
function saveNodeId1() {
  const selectedPoints = _global.Engine.selectBoxComp.selectedPoints.map(
    (value) => {
      return {
        nodeId: value.nodeId,
        partId: value.partId,
        x: value.x,
        y: value.y,
        z: value.z,
      };
    }
  );
  rodNode1 = selectedPoints[selectedPoints.length - 1];
  if (!rodNode1) {
    alert("请先选择一个点");
    return;
  }
  _global.Engine.model.add(
    new PointerActor([rodNode1.x, rodNode1.y, rodNode1.z], {
      color: [1, 1, 0],
      radius: 0.8,
    })
  );
  _global.Engine.selectBoxComp.resetSelectedMeshPoint();
}
function saveNodeId2() {
  const selectedPoints = _global.Engine.selectBoxComp.selectedPoints.map(
    (value) => {
      return {
        nodeId: value.nodeId,
        partId: value.partId,
        x: value.x,
        y: value.y,
        z: value.z,
      };
    }
  );
  rodNode2 = selectedPoints[selectedPoints.length - 1];
  // if (!rodNode2) {
  //   alert("请先选择一个点");
  //   return;
  // }
  _global.Engine.model.add(
    new PointerActor([rodNode2.x, rodNode2.y, rodNode2.z], {
      color: [1, 1, 0],
      radius: 0.8,
    })
  );
  _global.Engine.selectBoxComp.resetSelectedMeshPoint();
}
function confirm() {
  rightMeshEditStore.setRodUnitCreationModelValue(formRodUnitCreation.value);
  //节点与单元类型存到后端
  const rodUnitType = formRodUnitCreation.value.unitType;
  if (!rodNode1) {
    alert("请选择节点1再创建杆单元！");
    return;
  }
  if (!rodNode2) {
    alert("请选择节点2再创建杆单元！");
    return;
  }
  if (!rodUnitType) {
    alert("请选择单元类型再创建杆单元！");
    return;
  }
  _global.Engine.rod.crateRodUnit(rodNode1, rodNode2, rodUnitType);
  //页面出现杆的效果
  const color: [number, number, number] = [1, 1, 0];
  const width = 5;
  let data: MeshEdgeData;
  _global.Engine.measureComp.createMeshLine(
    data,
    [rodNode1.x, rodNode1.y, rodNode1.z],
    [rodNode2.x, rodNode2.y, rodNode2.z],
    color,
    width
  );
  rodUnitCreationModel.value = false;
}

function closeBtn() {
  rodUnitCreationModel.value = false;
}
</script>

<style scoped>
.box {
  padding: 15px;
}
.title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.imgStyle {
  width: 20px;
  height: 20px;
}
.selectorBox {
  padding-left: 80px;
  margin-bottom: 15px;
  width: 100%;
}
.foot-box {
  margin-top: 40px;
  width: 100%;
  height: 40px;
  text-align: right;
}
:deep(.vxp-form__item) {
  margin-bottom: 0px;
}
.selectorBox {
  padding-left: 80px;
  margin-bottom: 15px;
  width: 100%;
}

:deep(.vxp-radio-group) {
  display: flex !important;
  flex-wrap: wrap !important;
}
.radioStyle {
  width: 150px;
  margin-bottom: 10px;
}
.selectorBtn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.selector-button {
  height: 32px;
  width: 100px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  /* flex-grow: 1; */
  font-weight: normal;
}
.leftBtn {
  margin-right: 20px;
}
.selector-button2 {
  height: 32px;
  width: 42px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}
:deep(.vxp-button-vars) {
  --vxp-button-min-width: none;
}
</style>
